<template>
  <view>
    <view class="goods-list">
      <view v-for="(item, i) in goodsList" :key="i" @click="gotoDetail(item)">
        <view class="goods-item">
          <!-- 商品左侧区域 -->
          <view class="goods-item-left"><image :src="item.goods_small_logo || defaultPic" :style="{ width: item.goods_weight + 'px' }"></image></view>
          <!-- 右侧信息区域 -->
          <view class="goods-item-right">
            <!-- 商品标题 -->
            <view class="goods-name">{{ item.goods_name }}</view>
            <!-- 商品价格 -->
            <view class="goods-info-box">
              <view class="goods-price">￥{{ item.goods_price | tofixed }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 参数
      queryObj: {
        query: '',
        cid: '',
        // 默认请求第一页数据
        pagenum: 1,
        // 每页十条数据
        pagesize: 10
      },
      // 列表页数据
      goodsList: [],
      // 总数据 请求到数据后把总数据赋值给total
      total: 0,
      // 默认的空图片 当图片不存在时用默认图片
      defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
      // 节流阀 防止多次数据请求
      isLoading: false
    };
  },
  // 过滤器
  filters: {
    // 把数字处理为带两位小数点的数字
    // 针对传来的数据不是数字形式 反之可以直接在插值表达式里调用.stoFixed方法
    tofixed(num) {
      return Number(num).toFixed(2);
    }
  },
  // 生命周期函数
  onLoad(options) {
    // console.log(options);
    // 把带来的参数转存到queryObj中 没有的就赋值空
    this.queryObj.query = options.query || '';
    this.queryObj.cid = options.cid || '';
    // console.log(this.queryObj);

    // 与调用goodsList方法获取数据
    this.getGoodsList();
  },
  onReachBottom() {
    if(this.queryObj.pagesize * this.queryObj.pagenum >= this.total) return uni.$showMsg('我是有底线的')
    // 判断是否正在请求数据
    if (this.isLoading) return;
    // 页码值加一
    this.queryObj.pagenum++;
    // 判断数据应该请求几次
    var num = parseInt(this.total / this.queryObj.pagesize);
    // 如果是最后一次
    if (this.queryObj.pagenum > num) {
      // 得到最后一次的列表size
      var size = this.total - num * this.queryObj.pagesize;
      console.log(size);
      // 赋值
      this.queryObj.pagesize = size
    }
    // 请求数据
    this.getGoodsList();
    this.queryObj.pagesize = 10
  },
  // 下拉刷新的事件
  onPullDownRefresh() {
    // 1. 重置关键数据
    this.queryObj.pagenum = 1
    this.total = 0
    this.isloading = false
    this.goodsList = []
  
    // 2. 重新发起请求
    this.getGoodsList(() => uni.stopPullDownRefresh())
  },
  methods: {
    async getGoodsList(cb) {
      // 打开节流阀
      this.isLoading = true;
      const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj);
      // console.log(res)
      // 只要数据请求完毕，就立即按需调用 cb 回调函数
        cb && cb()
      // 请求失败时
      if (res.meta.status !== 200) return uni.$showMsg();
      // 请求成功 把数据赋值给goodsList
      // this.goodsList = res.message.goods
      // 把新数据拼接进去
      this.goodsList = [...this.goodsList, ...res.message.goods];
      this.total = res.message.total;
      // 关闭节流阀
      this.isLoading = false;
    },
    // 点击跳转到商品详情页面
    gotoDetail(item) {
      uni.navigateTo({
        url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
      })
    }
  }
};
</script>

<style lang="scss">
.goods-list {
  display: flex;
  flex-direction: column;
  background-color: '#fff';
  .goods-item {
    display: flex;
    flex: 1;
    height: 120px;
    .goods-item-left {
      image {
        height: 100%;
      }
    }
    .goods-item-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 5px;
      .goods-name {
        padding: 6px;
        font-size: 14px;
      }
      .goods-info-box {
        .goods-price {
          color: red;
        }
      }
    }
  }
}
</style>
